<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <title>Amaze UI Examples</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">


    <link rel="stylesheet" href="../assets/css/amazeui.min.css">
    <link rel="stylesheet" href="../assets/css/admin.css">
    <link rel="stylesheet" href="../assets/css/custom.css">
    
    <script src="../assets/js/jquery.min.js"></script>
	<script src="../assets/js/amazeui.min.js"></script>
	<script src="common.js"></script>

</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a
        href="http://browsehappy.com/" target="_blank">升级浏览器</a>
    以获得更好的体验！</p>
<![endif]-->

<!-- 页面内容 开发时删除 -->
<header class="am-topbar admin-header am-topbar-inverse">
    <div class="am-topbar-brand">
        <strong>Amaze UI</strong> <small>后台管理模板</small>
    </div>

    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

    <div class="am-collapse am-topbar-collapse" id="topbar-collapse">

        <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
            <li><a href="javascript:;"><span class="am-icon-envelope-o"></span> 收件箱 <span class="am-badge am-badge-warning">5</span></a></li>
            <li class="am-dropdown" data-am-dropdown>
                <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
                    <span class="am-icon-users"></span> 管理员 <span class="am-icon-caret-down"></span>
                </a>
                <ul class="am-dropdown-content">
                    <li><a href="#"><span class="am-icon-user"></span> 资料</a></li>
                    <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
                    <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
                </ul>
            </li>
            <li><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>
        </ul>
    </div>
</header>

<div class="am-cf admin-main">
    <!-- sidebar start -->
    <div class="admin-sidebar">
        <ul id="menu" class="am-list admin-sidebar-list">
            <li><a href="javascript:void(0);"><span class="am-icon-home"></span> 系统管理</a></li>
           <!-- <li>
                <a class="am-cf" data-am-collapse="{target: '#collapse-nav'}"> 基础信息</a>
                <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav">
                    <li><a href="javascript:void(0);">用户管理</a></li>
                    <li><a href="javascript:void(0);">角色管理</a></li>
                    <li><a href="javascript:void(0);">商品管理</a></li>
                </ul>
            </li>
            <li>
                <a class="am-cf" data-am-collapse="{target: '#collapse-nav-order'}"> 订单管理</a>
                <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav-order">
                    <li><a href="javascript:void(0);">订单评价</a></li>
                    <li><a href="javascript:void(0);">订单撤消</a></li>
                </ul>
            </li>-->
        </ul>

    </div>
    <!-- sidebar end -->
    <div id="main-content" class="admin-content" style="padding:5px 2px;">
    	<section data-am-widget="accordion" class="am-accordion am-accordion-gapped"
data-am-accordion='{  }'>
  <dl class="am-accordion-item am-active">
    <dt class="am-accordion-title"><span class="am-icon-search"></span> 查询</dt>
    <dd class="am-accordion-bd am-collapse am-in">
      <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
      <div class="am-accordion-content">
        
        
        <div class="search_tab" style="overflow:auto;">
        	<div class="tr">
        		<div class="label">关键字</div><div class="value"><input type="text" class="am-form-field am-radius"></div>
        		<div class="label">关键字</div><div class="value"><input type="text" class="am-form-field am-radius"></div>
        	</div>
        	<div class="tr">
        		<div class="label">时间</div><div class="value"><input type="text" class="am-form-field" placeholder="" data-am-datepicker readonly/></div>
        		<div class="label">类型</div>
        		<div class="value">
	        		<select >
					  <option value="a">Apple</option>
					  <option value="b">Banana</option>
					  <option value="o">Orange</option>
					  <option value="m">Mango</option>
					</select>
				</div>        		
        	</div>   
        	<div class="btn"><button type="button" class="am-btn am-btn-success">查询</button></div>     	
        </div>
      </div>
    </dd>
  </dl>
  </section>

<div class="am-g">
    <div class="am-u-md-6 am-cf">
        <div class="am-fl am-cf">
            <div class="am-btn-toolbar am-fl">
                <div class="am-btn-group am-btn-group-xs">
                    <button type="button" type="button" class="am-btn am-btn-default"><span class="am-icon-plus"></span> 新增</button>
                    <button type="button" type="button" class="am-btn am-btn-default"><span class="am-icon-save"></span> 保存</button>
                    <button type="button" type="button" class="am-btn am-btn-default"><span class="am-icon-archive"></span> 审核</button>
                    <button type="button" type="button" class="am-btn am-btn-default"><span class="am-icon-trash-o"></span> 删除</button>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="am-g">
<div class="am-u-sm-12">
<form class="am-form" action="a.html">
<table class="am-table am-table-striped am-table-hover table-main">
<thead>
<tr>
    <th class="table-check"><input type="checkbox" /></th><th class="table-id">ID</th><th class="table-title">标题</th><th class="table-type">类别</th><th class="table-author">作者</th><th class="table-date">修改日期</th><th class="table-set">操作</th>
</tr>
</thead>
<tbody>
<tr>
    <td><input type="checkbox" /></td>
    <td>1</td>
    <td><a href="#">Business management</a></td>
    <td>default</td>
    <td>测试1号</td>
    <td>2014年9月4日 7:28:47</td>
    <td>
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modal-1', closeViaDimmer: 0}"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs"><span class="am-icon-copy"></span> 复制</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>2</td>
    <td><a href="#">Business management</a></td>
    <td>default</td>
    <td>测试1号</td>
    <td>2014年9月4日 7:28:47</td>
    <td>
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modal-1', closeViaDimmer: 0, width: 500, height: 525}"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs"><span class="am-icon-copy"></span> 复制</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>3</td>
    <td><a href="#">Business management</a></td>
    <td>default</td>
    <td>测试1号</td>
    <td>2014年9月4日 7:28:47</td>
    <td>
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modal-1', closeViaDimmer: 0, width: 500, height: 525}"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs"><span class="am-icon-copy"></span> 复制</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>4</td>
    <td><a href="#">Business management</a></td>
    <td>default</td>
    <td>测试1号</td>
    <td>2014年9月4日 7:28:47</td>
    <td>
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modal-1', closeViaDimmer: 0, width: 500, height: 525}"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs"><span class="am-icon-copy"></span> 复制</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>5</td>
    <td><a href="#">Business management</a></td>
    <td>default</td>
    <td>测试1号</td>
    <td>2014年9月4日 7:28:47</td>
    <td>
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modal-1', closeViaDimmer: 0, width: 500, height: 525}"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs"><span class="am-icon-copy"></span> 复制</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>6</td>
    <td><a href="#">Business management</a></td>
    <td>default</td>
    <td>测试1号</td>
    <td>2014年9月4日 7:28:47</td>
    <td>
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modal-1', closeViaDimmer: 0, width: 500, height: 525}"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs"><span class="am-icon-copy"></span> 复制</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>7</td>
    <td><a href="#">Business management</a></td>
    <td>default</td>
    <td>测试1号</td>
    <td>2014年9月4日 7:28:47</td>
    <td>
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modal-1', closeViaDimmer: 0, width: 500, height: 525}"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs"><span class="am-icon-copy"></span> 复制</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>8</td>
    <td><a href="#">Business management</a></td>
    <td>default</td>
    <td>测试1号</td>
    <td>2014年9月4日 7:28:47</td>
    <td>
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modal-1', closeViaDimmer: 0, width: 500, height: 525}"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs"><span class="am-icon-copy"></span> 复制</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>9</td>
    <td><a href="#">Business management</a></td>
    <td>default</td>
    <td>测试1号</td>
    <td>2014年9月4日 7:28:47</td>
    <td>
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modal-1', closeViaDimmer: 0, width: 500, height: 525}"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs"><span class="am-icon-copy"></span> 复制</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>10</td>
    <td><a href="#">Business management</a></td>
    <td>default</td>
    <td>测试1号</td>
    <td>2014年9月4日 7:28:47</td>
    <td>
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modal-1', closeViaDimmer: 0, width: 500, height: 525}"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs"><span class="am-icon-copy"></span> 复制</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>11</td>
    <td><a href="#">Business management</a></td>
    <td>default</td>
    <td>测试1号</td>
    <td>2014年9月4日 7:28:47</td>
    <td>
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modal-1', closeViaDimmer: 0, width: 500, height: 525}"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs"><span class="am-icon-copy"></span> 复制</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>12</td>
    <td><a href="#">Business management</a></td>
    <td>default</td>
    <td>测试1号</td>
    <td>2014年9月4日 7:28:47</td>
    <td>
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modal-1', closeViaDimmer: 0, width: 500, height: 525}"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs"><span class="am-icon-copy"></span> 复制</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>13</td>
    <td><a href="#">Business management</a></td>
    <td>default</td>
    <td>测试1号</td>
    <td>2014年9月4日 7:28:47</td>
    <td>
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modal-1', closeViaDimmer: 0, width: 500, height: 525}"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs"><span class="am-icon-copy"></span> 复制</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>14</td>
    <td><a href="#">Business management</a></td>
    <td>default</td>
    <td>测试14号</td>
    <td>2014年9月4日 7:28:47</td>
    <td>
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modal-1', closeViaDimmer: 0, width: 500, height: 525}"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs"><span class="am-icon-copy"></span> 复制</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>15</td>
    <td><a href="#">Business management</a></td>
    <td>default</td>
    <td>测试1号</td>
    <td>2014年9月4日 7:28:47</td>
    <td>
        <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#modal-1', closeViaDimmer: 0, width: 500, height: 525}"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs"><span class="am-icon-copy"></span> 复制</button>
                <button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"><span class="am-icon-trash-o"></span> 删除</button>
            </div>
        </div>
    </td>
</tr>
</tbody>
</table>
<div class="am-cf">
    共 15 条记录
    <div class="am-fr">
        <ul class="am-pagination">
            <li class="am-disabled"><a href="#">«</a></li>
            <li class="am-active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">»</a></li>
        </ul>
    </div>
</div>
<hr />

</form>
<!--
modal
-->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="modal-1">
    <div class="am-modal-dialog">

        <div class="am-modal-hd">编辑
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd" style="padding-right: 20px;">
            <form class="am-form">
                <div class="am-g am-margin-top-sm">
                    <div class="am-u-sm-3 am-text-right">
                        SEO 标题
                    </div>
                    <div class="am-u-sm-9 am-u-end">
                        <input type="text" class="am-input-sm">
                    </div>
                </div>

                <div class="am-g am-margin-top-sm">
                    <div class="am-u-sm-3 am-text-right">
                        SEO 关键字
                    </div>
                    <div class="am-u-sm-9 am-u-end">
                        <input type="text" class="am-input-sm">
                    </div>
                </div>

                <div class="am-g am-margin-top-sm">
                    <div class="am-u-sm-3 am-text-right">
                        SEO 描述
                    </div>
                    <div class="am-u-sm-9 am-u-end">
                        <textarea rows="4"></textarea>
                    </div>
                </div>
            </form>
            <div class="am-margin">
                <button class="am-btn am-btn-primary am-btn-xs" type="button">提交保存</button>
                <button class="am-btn am-btn-primary am-btn-xs" type="button">放弃保存</button>
            </div>
        </div>



    </div>
</div>

</div>

</div>
    	
    </div>
</div>

<script>
    $(function(){
        initMenu();
        //openPage("main.html");

    })
    function initMenu(){
        doAjax("data_test.js",null, function(data){
            var menus = data.menu;
            for(var i = 0; i < menus.length; i++){
                if(menus[i].parent == null || menus[i].parent.length == 0){
                    $("#menu").append('<li class=""><a class="am-cf c-active" href="javascript:void(0);" p="true" subId="'+menus[i].id+'"><span class="am-icon-minus-square"></span> '+menus[i].name+'</a></li>');
                    $("#menu").append('<ul class="am-list am-collapse admin-sidebar-sub am-in" id="sub_'+menus[i].id+'"></ul>');
                }else{
                    $("#sub_"+menus[i].parent).append('<li><a href="javascript:void(0);" url="'+menus[i].url+'" onclick="onMenu(this)">'+menus[i].name+'</a></li>');
                }
            }
            $("a[p='true']").bind({click: function(){
                var a = $(this);
                var $collapse = $("#sub_"+a.attr("subId"));
                $collapse.collapse('toggle');
                if(a.find("span").hasClass("am-icon-minus-square")){
                    a.find("span").removeClass();
                    a.find("span").addClass("am-icon-plus-square");
                }else{
                    a.find("span").removeClass();
                    a.find("span").addClass("am-icon-minus-square");
                }

               /* $collapse.on('open.collapse.amui', function() {
                    a.find("span").removeClass();
                    a.find("span").addClass("am-icon-minus");
                });

                $collapse.on('close.collapse.amui', function() {
                    a.find("span").removeClass();
                    a.find("span").addClass("am-icon-plus");
                })*/
            }});
        });
    }
    function onMenu(item){
    	window.location.href = $(item).attr("url");
       //openPage($(item).attr("url"));
    }
    function openPage(url){
        doAjax(url, null, function(data){
            $("#main-content").empty();
            $("#main-content").append(data);
        },"html");
    }
    </script>
</body>
</html>
